<template>
    <div class="folder" :class="{'show' : show , 'active' : activeId == folderValue.id , 'root' : folderValue.isRoot}"
        @mouseover.stop="fileMouseover($event)" @mouseout.stop="fileMouseout()">
        <div class="folder-name" @mousedown="keyDown($event)" @mouseup="keyUp">
            <div class="icon">
                <div class="icon-box"></div>
            </div>
            <div class="folder-title">{{folderValue.title}}</div>
            <div class="folderSetting" v-if="!folderValue.isRoot && !folderMoveModule && !apiMoveModule">
                <div class="folderSettingItem" @mousedown.stop="newFolderEvent" @mouseup.stop="settingDown">
                    <i class="el-icon-folder-add"></i>
                </div>
                <div class="folderSettingItem" @mousedown.stop="openDetail" @mouseup.stop="settingDown">
                    <i class="el-icon-edit-outline"></i>
                </div>
                <div class="folderSettingItem" @mousedown.stop="deleteFolder" @mouseup.stop="settingDown">
                    <i class="el-icon-delete"></i>
                </div>
            </div>
            <div class="folderSetting" v-if="folderValue.isRoot && !folderMoveModule && !apiMoveModule">
                <div class="folderSettingItem" @mousedown.stop="newFolderEvent" @mouseup.stop="settingDown">
                    <i class="el-icon-folder-add"></i>
                </div>
                <div class="folderSettingItem" @mousedown.stop="hiddenAllFolder" @mouseup.stop="settingDown">
                    <i class="el-icon-remove-outline"></i>
                </div>
                <div class="folderSettingItem" @mousedown.stop="refresh" @mouseup.stop="settingDown">
                    <i class="el-icon-refresh"></i>
                </div>

            </div>
        </div>
        <div class="moveLineBox" v-if="folderMoveModule">
            <div class="TopMoveMark" v-if="!folderValue.isRoot" @mouseover.stop="mouseover('TopMoveMark')"
                @mouseout.stop="mouseout">
                <moveLine v-if="TopMoveMark && moveActiveObject && folderValue.id == moveActiveObject.id"></moveLine>
            </div>
            <div class="intoFolder"
                :style="{ 'top' : folderValue.isRoot ? '0px' : '25%', 'height' : folderValue.isRoot ? '100%' : '50%' }"
                @mouseover.stop="mouseover('intoFolder')" @mouseout.stop="mouseout"></div>
            <div class="BottomMoveMark" v-if="!folderValue.id" @mouseover.stop="mouseover('BottomMoveMark')"
                @mouseout.stop="mouseout">
                <moveLine v-if="BottomMoveMark && moveActiveObject && folderValue.id == moveActiveObject.id"></moveLine>
            </div>
        </div>

        <el-collapse-transition>
            <div v-show="show">
                <div class="folder-list">
                    <folder v-for="item in folderValue.folderList" :key="item.id" :openParentFolder="openFolder"
                        :folderValue="item"></folder>
                </div>
                <div class="folder-api">
                    <file v-for="item in folderValue.apiList" :key="item.id" :openParentFolder="openFolder"
                        :apiValue="item">
                    </file>
                </div>
                <div class="empty" v-if="!folderValue.folderList.length && !folderValue.apiList.length">(空)</div>
            </div>
        </el-collapse-transition>
    </div>
</template>

<script>
    import { mapState } from "vuex";
    import file from './file.vue';
    import moveLine from "./moveLine"

    export default {
        components: {
            file,
            moveLine
        },
        props: ['folderValue', 'openParentFolder'],
        name: 'folder',
        data() {
            return {
                show: false,
                active: false,
                TopMoveMark: false,
                BottomMoveMark: false,
            }
        },
        computed: {
            ...mapState("ApiActive", {
                activeId: state => state.activeId
            }),
            ...mapState("Tree", {
                apiMoveModule: state => state.apiMoveModule,
                moveActiveObject: state => state.moveActiveObject,
                markSetting: state => state.markSetting,
                folderMoveModule: state => state.folderMoveModule,
                closeAllFolder: state => state.closeAllFolder,
            }),
            ...mapState("theme", {
                theme: state => state.theme,
            }),
        },
        watch: {
            closeAllFolder: function (newVal, oldVal) {
                this.show = false;
            },
        },
        mounted() {
            this.init();
        },
        updated() {
            this.init();
        },
        methods: {
            openFolder() {
                if (!this.folderValue.isRoot) {
                    this.show = true;
                    this.openParentFolder();
                };
            },
            refresh() {
                this.$store.dispatch('Tree/getRenderData', () => {
                    this.$message({
                        message: '获取项目数据失败',
                        type: 'warning'
                    });
                });
            },
            hiddenAllFolder() {
                this.$store.dispatch('Tree/closeAllFolder');
            },
            newFolderEvent() {
                this.$store.dispatch('Tree/newFolder', this.folderValue);
                // this.newFolder.title = '';
                // this.newFolder.description = '';
                // this.newFolder.show = true;
            },
            openDetail() {
                this.$store.dispatch('Tree/openFolderDetail', this.folderValue);
            },
            deleteFolder() {
                this.$confirm('是否删除文件夹？', '警告', {
                    customClass: this.theme
                }).then(_ => {
                    console.log('delete');
                }).catch(_ => { });
            },
            settingDown() { },
            keyDown(event) {
                if (!this.folderValue.isRoot) {
                    let X = event.clientX;
                    let Y = event.clientY;
                    document.onmousemove = (event) => {
                        if (!this.folderMoveModule) {
                            if (Math.abs(X - event.clientX) > 10 || Math.abs(Y - event.clientY) > 10) {
                                this.$store.dispatch('Tree/setFolderMoveModule', true);
                                this.show = false;
                            };
                        };
                        this.$store.dispatch('Tree/setMoveObject', {
                            id: this.folderValue.id,
                            x: event.clientX + 30,
                            y: event.clientY + 10,
                            title: this.folderValue.title,
                        });
                    };
                    document.onmouseup = () => {
                        if (this.folderMoveModule) {
                            this.$store.dispatch('Tree/checkMove');
                        };
                        this.$store.dispatch('Tree/setMoveActiveObject', null);
                        this.TopMoveMark = false;
                        this.BottomMoveMark = false;

                        this.$store.dispatch('Tree/setFolderMoveModule', false);
                        this.$store.dispatch('Tree/setMoveObject', {
                            id: null,
                            x: -100,
                            y: -100,
                            title: '',
                        });
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                };
            },
            keyUp() {
                this.$nextTick(() => {
                    if (!this.folderValue.isRoot) {
                        if (!this.folderMoveModule && !this.apiMoveModule) {
                            this.show = !this.show;
                            this.$store.dispatch('ApiActive/setActiveId', this.folderValue.id)
                        };
                    };
                });
            },
            mouseover(type) {
                if (this.folderMoveModule) {
                    this.$store.dispatch('Tree/setMoveActiveObject', this.folderValue);
                    if (this.markSetting.id != this.moveActiveObject.id) {
                        setTimeout(() => {
                            let position = this.$el.getBoundingClientRect()
                            if (
                                position.left < this.markSetting.x &&
                                position.left + position.width > this.markSetting.x &&
                                position.top < this.markSetting.y &&
                                position.top + position.height > this.markSetting.y
                            ) {
                                this.show = true;
                            };
                        }, 1500);
                    };
                    this.TopMoveMark = false;
                    this.BottomMoveMark = false;
                    if (type != 'intoFolder') {
                        this[type] = true;
                    };
                    if (this.markSetting.id != this.moveActiveObject.id) {
                        this.$store.dispatch('Tree/setApiMoveType', type);
                    } else if (this.markSetting.id == this.moveActiveObject.id) {
                        this.$store.dispatch('Tree/setApiMoveType', null);
                    };
                };
            },
            mouseout() {
                if (this.folderMoveModule) {
                    this.$store.dispatch('Tree/setMoveActiveObject', null);
                };
            },
            fileMouseover(event) {
                // 鼠标悬停展开文件夹
                if (this.apiMoveModule) {
                    setTimeout(() => {
                        let position = this.$el.getBoundingClientRect()
                        if (
                            position.left < this.markSetting.x &&
                            position.left + position.width > this.markSetting.x &&
                            position.top < this.markSetting.y &&
                            position.top + position.height > this.markSetting.y
                        ) {
                            this.show = true;
                        };
                    }, 1500);
                    this.$store.dispatch('Tree/setMoveActiveObject', this.folderValue);
                    this.$store.dispatch('Tree/setApiMoveType', 'moveIntoFolder');
                };
            },
            fileMouseout() {
                if (this.apiMoveModule) {
                    this.$store.dispatch('Tree/setMoveActiveObject', null);
                    this.$store.dispatch('Tree/setApiMoveType', null);
                };
            },
            init() {
                if (this.folderValue.isRoot) {
                    this.active = false;
                    this.show = true;
                }
            },
        },
    };
</script>
<style>

</style>